{% extends 'base.html' %}

{% block title %}
<title>主页</title>
{% endblock %}


{% block bbb %}


<!--home-->
<section id="home">


    <div class="filter">
        <div class="container">
            <div class="row wow jello">
                <div class="col-md-1"></div><!--起占位作用-->
                <div class="col-md-10 ">
                    <h1>机器学习实战课程等你来战！
                    </h1>
                    <p>本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员<br>
                        人生苦短，我用python,学习python，从入门到精通！
                    </p>
                    <img src="/static/images/php.jpg" class="img-responsive" alt="php">
                </div>
                <div class="col-md-1"></div><!--起占位作用-->
            </div>
        </div>
    </div>


</section>
<!--home-->

<!--bbs-->
<section id="bbs">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <a href="http://www.gec-edu.org/">
                    <img class="img-responsive" src="/static/images/a.png" alt="">
                    <h3>Android开发</h3>
                    <p>Android开发技术交流、问题求助、实战案例分享</p>
                </a>
            </div>
            <div class="col-md-4">
                <a href="http://www.gec-edu.org/">
                    <img class="img-responsive" src="/static/images/i.png" alt="">
                    <h3>IOS开发</h3>
                    <p>iOS开发技术交流，海量iOS实战干货分享</p>
                </a>
            </div>
            <div class="col-md-4">
                <a href="http://www.gec-edu.org/">
                    <img class="img-responsive" src="/static/images/b.png" alt="">
                    <h3>嵌入式底层开发</h3>
                    <p>底层嵌入式开发、实战案例等技术交流讨论</p>
                </a>
            </div>

        </div>
    </div>
</section>
<!--bbs-->

<!--html5-->
<section id="html5">
    <div class="container">
        <div class="row">
            <div class="col-md-6 wow bounceInLeft">
                <h2>HTML5前端开发</h2>
                <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
                <p><span class="glyphicon glyphicon-tree-deciduous"></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
                <p><span class="glyphicon glyphicon-tree-deciduous"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
            </div>
            <div class="col-md-6 wow bounceInRight">
                <img class="img-responsive" src="/static/images/html5.jpg" alt="html5">
            </div>
        </div>
    </div>
</section>
<!--html5-->

<!--bootstrap-->
<section id="bootstrap">
    <div class="container">
        <div class="row">


            <div class="col-md-6">
                <img class="img-responsive" src="/static/images/Bootstrap.jpg" alt="Responsive image">
            </div>

            <div class="col-md-6">
                <h2>HTML5前端开发</h2>
                <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
                <p><span class="glyphicon glyphicon-tree-deciduous"></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
                <p><span class="glyphicon glyphicon-tree-deciduous"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
            </div>

        </div>
    </div>
</section>
<!--bootstrap-->


<!--app-->
<section id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h2>广州粤嵌IT教育移动APP下载</h2>
                <p>全新UI交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出你想要的课程，一件收藏，方便自己重复学习，离线下载课程，在哪儿都能开！</p>
                <a href="http://www.gec-edu.org" class="btn btn-primary"><span
                        class="glyphicon glyphicon-download-alt"></span>&nbsp;Iphone版</a>
                <a href="http://www.gec-edu.org" class="btn btn-primary"><span
                        class="glyphicon glyphicon-download-alt"></span>&nbsp;Android版</a>
            </div>

            <div class="col-md-6">
                <img src="/static/images/app-banner.jpg" class="img-responsive" alt="app">
            </div>
        </div>
    </div>
</section>
<!--app-->
{% endblock %}


{% block script %}


<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script>
    $(function(){   //加载完成后再执行下面的代码
       $('nav').singlePageNav();
       offset:70
    });

    new WOW().init();

    $(".collapse li").click(function(){
         $(".collapse").collapse("hide");
    })

</script>
{% endblock %}